<template>
  <basic-container>
    <el-container>
      <el-aside width="200px">
        <deptTree ref="building_tree"
                  @treeNode-click="treeNodeClick"></deptTree>
      </el-aside>
      <el-main id="el-main">
        <div class="col-sm-12 member-chart ng-scope el-card box-card is-always-shadow">
          <h4 class="dd-dataCenter-heading ng-binding">企业总览</h4>
          <div class="row row padding-top20">
            <div class="col_4">
              <div class="dd-dataCenter-panel">
                <div class="dd-dataCenter-panel-hd ng-binding">近期用电情况</div>
                <br>
                <div class="dd-person-status ng-binding">
                  时用电
                  <el-button type='text'
                             class="pull-right text-danger ng-binding"
                             @click="capitalList('本日用电',1)"
                             v-text="form.income_hour">
                  </el-button>
                </div>
                <div class="dd-person-status ng-binding">日用电
                  <el-button type='text'
                             class="pull-right text-success ng-binding"
                             @click="capitalList('本月用电',0)"
                             v-text="form.income_day">
                  </el-button>
                </div>
                <div class="dd-person-status ng-binding">月用电
                  <el-button type='text'
                             class="pull-right text-success ng-binding"
                             @click="capitalList('本年用电',2)"
                             v-text="form.income_mon">
                  </el-button>
                </div>
                <!-- ngIf: dataCenter.unactiveCount > 0 -->
              </div>
            </div>
            <div class="col_4">
              <div class="dd-dataCenter-panel">
                <div class="dd-dataCenter-panel-hd ng-binding">员工流动情况情况</div>
                <br>
                <div class="dd-person-status ng-binding">在职人数
                  <el-button type='text'
                             class="pull-right text-success ng-binding"
                             @click="employeeList('在职人数',0)"
                             v-text="form.employee">
                  </el-button>
                </div>
                <div class="dd-person-status ng-binding">离职人数
                  <el-button type='text'
                             class="pull-right text-danger ng-binding"
                             @click="employeeList('离职人数',0)"
                             v-text="form.employee_lz">
                  </el-button>
                </div>
                <!-- ngIf: dataCenter.unactiveCount > 0 -->
              </div>
            </div>
            <!-- <div class=" col_4">
            <div class="dd-dataCenter-panel">
              <div class="dd-dataCenter-panel-hd ng-binding">开门情况</div>
              <br>
              <div class="dd-person-status ng-binding">开门人数
                <el-button type='text' class="pull-right text-success ng-binding" @click="employeeList('开门人数',0)" v-text="form.insurance">
                </el-button>
              </div>
            </div>
          </div> -->
          </div>
        </div>
        <div class="col-sm-12 member-chart ng-isolate-scope el-card box-card is-always-shadow attendance dd-dataCenter-heading ng-binding">
          <div>
            <h4 style="font-weight:bold">企业开门人数</h4>
          </div>
          <div class="attDate"
               style="width:40%;">
            <h4 style="width:100%;font-weight:bold">企业名称:{{reportName}}</h4>
            <!-- <el-date-picker type="date" value-format="yyyy/MM/dd" v-model="date" @change="changeCharts" placeholder="选择考勤日期"></el-date-picker> -->
          </div>

        </div>
        <div class="col-sm-12">
          <div id="memberLineChart"
               class="member-line-chart"
               _echarts_instance_="1543301061157"
               style="-webkit-tap-highlight-color: transparent; user-select: none; background-color: rgba(0, 0, 0, 0); cursor: default;">
            <div id="myChart"
                 :style="{width: '100%', height: '400px'}"></div>
          </div>
        </div>
      </el-main>
      <el-dialog :title="employeeTitle"
                 width="50%"
                 :visible.sync="employeeVisible"
                 :close-on-click-modal="false">
        <el-table :data="employeeDatas"
                  style="width:100%;"
                  border
                  stripe
                  :header-row-class-name="headStyle"
                  highlight-current-row
                  v-loading="listLoading"
                  :row-class-name="tableRowClassName"
                  @sort-change="handleSortChange">
          <template slot="empty">
            暂时没权限查看
          </template>
          <el-table-column prop="index"
                           :formatter="index_formatter"
                           label="序号"></el-table-column>
          <el-table-column prop="name"
                           label="姓名"
                           show-overflow-tooltip></el-table-column>
          <el-table-column prop="dept"
                           label="部门"
                           show-overflow-tooltip></el-table-column>
          <el-table-column prop="position"
                           label="职位"
                           show-overflow-tooltip></el-table-column>
        </el-table>
        <el-col :span="24"
                class="toolbar"
                id="pageDiv">
          <el-pagination small
                         background
                         :page-sizes="[10, 20, 50, 100]"
                         :page-size="pageSize"
                         :total="total"
                         layout="total,sizes, prev, pager, next"
                         style="float:right;"></el-pagination>
        </el-col>

        <div slot="footer"
             class="dialog-footer">
          <el-button type="primary"
                     @click="employeeVisible=false">关闭</el-button>
        </div>
      </el-dialog>
      <el-dialog :title="capitalTitle"
                 width="800px"
                 :visible.sync="capitalVisible"
                 :close-on-click-modal="false">

        <div id="cashLineChart"
             class="member-line-chart">
          <div id="myCashChart"
               :style="{width: '780px', height: '400px'}"></div>
        </div>
      </el-dialog>
    </el-container>
  </basic-container>
</template>

<script>
import { mapGetters } from "vuex";
import deptTree from "../report/deptTree.vue";
export default {
  name: "table_dept",
  components: {
    deptTree
  },
  data() {
    return {
      num: 0,
      count: 1,
      date: new Date(),
      title: "今",
      employeeDatas: [],
      gridDatas: [],
      sort: {
        sort: "sort",
        order: "asc"
      },
      reportName: "",
      total: 0,
      page: 1,
      pageSize: 10,
      listLoading: false,
      sels: [],
      employeeTitle: "",
      capitalTitle: "",
      listLoading: false,
      dialogStatus: false,
      isDanwei: true,
      dialogFormVisible: false,
      addDisabled: true,
      employeeVisible: false,
      _btn_add_flag: false,
      capitalVisible: true,
      baseEmployee: [],
      capitalDatas: [],
      capital: 2,
      form: {
        income_mon: 0,
        income_day: 0,
        income_hour: 0,
        employee: 0,
        employee_lz: 0,
        insurance: 0,
        insurance_no: 0
      },
      data_now: [],
      data_last: [],
      data: [
        70,
        73,
        11,
        72,
        70,
        69,
        50,
        49,
        65,
        8,
        69,
        69,
        70,
        30,
        60,
        71,
        5,
        68,
        71,
        68,
        69,
        71,
        70,
        2,
        70,
        73,
        66,
        68,
        31
      ],
      data1: [
        68,
        71,
        10,
        72,
        71,
        67,
        56,
        55,
        65,
        7,
        74,
        70,
        70,
        30,
        60,
        66,
        6,
        68,
        64,
        62,
        65,
        68,
        71,
        3,
        71,
        70,
        64,
        67,
        31
      ],
      data2: [
        73,
        72,
        9,
        71,
        68,
        72,
        57,
        53,
        65,
        6,
        68,
        69,
        70,
        30,
        60,
        69,
        9,
        68,
        68,
        73,
        67,
        71,
        73,
        7,
        71,
        70,
        64,
        67,
        31
      ],
      data3: [
        71,
        71,
        10,
        68,
        72,
        69,
        52,
        49,
        65,
        5,
        71,
        69,
        70,
        30,
        71,
        70,
        4,
        68,
        70,
        68,
        64,
        67,
        65,
        3,
        71,
        64,
        67,
        65,
        31
      ],
      data4: [
        70,
        71,
        10,
        72,
        70,
        75,
        71,
        49,
        65,
        4,
        75,
        69,
        70,
        30,
        60,
        71,
        3,
        68,
        71,
        72,
        64,
        71,
        65,
        6,
        71,
        70,
        64,
        67,
        31
      ],
      baseEmployee: [
        {
          name: "胡小伟",
          dept: "产品设计部",
          position: "需求分析师"
        },
        {
          name: "张帆",
          dept: "产品设计部",
          position: "需求分析师"
        },
        {
          name: "李丽萍",
          dept: "产品设计部",
          position: "副总监"
        },
        {
          name: "开赛",
          dept: "技术研发部",
          position: "中级工程师"
        },
        {
          name: "李鹏明",
          dept: "技术研发部",
          position: "高级工程师"
        },
        {
          name: "刘娣",
          dept: "技术研发部",
          position: "总监"
        },
        {
          name: "潘元明",
          dept: "市场部",
          position: "初级营销经理"
        },
        {
          name: "凯南",
          dept: "运营支持部",
          position: "财务经理"
        }
      ]
    };
  },
  created() {},
  computed: {},
  methods: {
    capitalList(name, type) {
      this.capitalVisible = true;
      this.capitalTitle = name;
      let myChart = this.$echarts.init(document.getElementById("myCashChart"));
      let hourDate = [
        "1h",
        "2h",
        "3h",
        "4h",
        "5h",
        "6h",
        "7h",
        "8h",
        "9h",
        "10h",
        "11h",
        "12h",
        "13h",
        "14h",
        "15h",
        "16h",
        "17h",
        "18h",
        "19h",
        "20h",
        "21h",
        "22h",
        "23h",
        "24h"
      ];
      var base = +new Date(2018, 11, 1);
      var oneDay = 24 * 3600 * 1000;
      var date = [];
      var data = [];
      var hourData = [];
      for (var i = 1; i < 30; i++) {
        var now = new Date((base += oneDay));
        date.push(
          [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
        );
      }
      for (var i = 1; i <= 24; i++) {
        hourData.push(Math.floor(Math.random() * 1000) / 100);
      }
      if (type == 0) {
        myChart.setOption({
          title: {
            text: "日用电详情"
          },
          tooltip: {
            trigger: "axis"
          },
          legend: {
            data: ["日用电量"]
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          toolbox: {
            show: true,
            orient: "horizontal",
            x: "80%",
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: {
                show: true,
                type: ["line", "bar", "stack", "tiled"]
              },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: date
          },
          yAxis: {
            type: "value",
            axisLabel: {
              formatter: "{value} °"
            }
          },
          series: [
            {
              name: "日用电量",
              type: "line",
              stack: "总量",
              markLine: {
                data: [{ type: "average", name: "平均值" }]
              },
              data: [
                102,
                98,
                56,
                20,
                110,
                108,
                107,
                100,
                99,
                60,
                30,
                120,
                103,
                116,
                104,
                105,
                45,
                23,
                101,
                120,
                130,
                118,
                102,
                48,
                19,
                98,
                127,
                131,
                120,
                116,
                58,
                24,
                102
              ],
              itemStyle: {
                color: "#409eff"
              }
            }
          ]
        });
      } else if (type == 2) {
        var labelOption = {
          normal: {
            show: true,
            position: "top"
          }
        };
        myChart.setOption({
          color: ["#80b490", "#006699"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            }
          },
          legend: {
            data: ["月用电量"]
          },
          toolbox: {
            show: true,
            orient: "horizontal",
            x: "80%",
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: {
                show: true,
                type: ["line", "bar", "stack", "tiled"]
              },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          calculable: true,
          xAxis: [
            {
              type: "category",
              axisTick: { show: false },
              data: [
                "一月",
                "二月",
                "三月",
                "四月",
                "五月",
                "六月",
                "七月",
                "八月",
                "九月",
                "十月",
                "十一月",
                "十二月"
              ]
            }
          ],
          yAxis: {
            type: "value",
            axisLabel: {
              formatter: "{value} °"
            }
          },

          series: [
            {
              name: "月用电",
              type: "line",
              barGap: 0,
              label: labelOption,
              itemStyle: {
                color: "#409eff"
              },
              markLine: {
                data: [{ type: "average", name: "平均值" }]
              },
              data: [
                2630,
                2396,
                2733,
                2405,
                2207,
                2097,
                2456,
                2642,
                2712,
                2512,
                2268,
                2430
              ]
            }
          ]
        });
      } else {
        myChart.setOption({
          tooltip: {
            trigger: "axis"
          },
          title: {
            text: "时用电量详情"
          },
          legend: {
            data: ["时用电量"]
          },
          toolbox: {
            show: true,
            orient: "horizontal",
            x: "80%",
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: {
                show: true,
                type: ["line", "bar", "stack", "tiled"]
              },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: hourDate
          },
          yAxis: {
            type: "value",
            axisLabel: {
              formatter: "{value} °"
            }
          },
          series: [
            {
              name: "时用电量",
              type: "line",
              stack: "总量",
              itemStyle: {
                color: "#409eff"
              },
              markLine: {
                data: [{ type: "average", name: "平均值" }]
              },
              data: [
                "1",
                "1.2",
                "1.5",
                "1",
                "0.7",
                "2",
                "9",
                "15",
                "16",
                "20",
                "21",
                "20",
                "23",
                "19",
                "15",
                "13",
                "10",
                "8",
                "3",
                "2",
                "1.6",
                "1",
                "1",
                "1"
              ]
            }
          ]
        });
      }
    },
    initParam() {
      this.num++;
      if (this.num % 2 == 0) {
        this.data_now = this.data1;
        this.form.income_mon = 2634;
        this.form.income_day = 103;
        this.form.income_hour = 17;
        this.form.employee = 74;
        this.form.employee_lz = 3;
        this.form.insurance = 76;
        this.drawLine();
      } else if (this.num % 3 == 0) {
        this.data_now = this.data3;
        this.form.income_mon = 2365;
        this.form.income_day = 92;
        this.form.income_hour = 15;
        this.form.employee = 76;
        this.form.employee_lz = 4;
        this.form.insurance = 77;
        this.drawLine();
      } else if (this.num % 5 == 0) {
        this.data_now = this.data2;
        this.form.income_mon = 2623;
        this.form.income_day = 97;
        this.form.income_hour = 19;
        this.form.employee = 71;
        this.form.employee_lz = 1;
        this.form.insurance = 72;
        this.drawLine();
      } else {
        this.data_now = this.data4;
        this.form.income_mon = 2712;
        this.form.income_day = 95;
        this.form.income_hour = 14;
        this.form.employee = 79;
        this.form.employee_lz = 2;
        this.form.insurance = 76;
        this.drawLine();
      }
      this.drawLine();
    },
    changeCharts(val) {
      this.num++;
      if (this.num % 2 == 0) {
        this.data = this.data1;
      } else {
        this.data = this.data2;
      }
      this.drawLine();
    },
    drawLine() {
      this.capitalVisible = false;
      const safe = this;
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      var nowdate = new Date();
      nowdate.setMonth(nowdate.getMonth() - 1);
      var y = nowdate.getFullYear();
      var m = nowdate.getMonth() + 1;
      var d = nowdate.getDate();
      var formatwdate = y + "," + m + "," + d;

      let bases = +new Date(formatwdate);
      let oneDays = 24 * 3600 * 1000;
      let xdate = [];
      for (var i = 1; i < 30; i++) {
        var now = new Date((bases += oneDays));
        xdate.push(
          [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
        );
      }
      // 绘制图表
      myChart.setOption(
        {
          tooltip: {
            trigger: "axis"
          },
          legend: {
            data: ["日开门人数"]
          },
          toolbox: {
            show: true,
            orient: "horizontal",
            x: "80%",
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: {
                show: true,
                type: ["line", "bar", "stack", "tiled"]
              },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          title: {
            text: "开门情况(显示30天截止至昨天)",
            x: "center",
            y: "top",
            textAlign: "center"
          },
          xAxis: {
            type: "category",
            data: xdate
          },
          yAxis: {
            type: "value",
            axisLabel: {
              formatter: "{value} (人)"
            }
          },
          series: [
            {
              name: "人数",
              type: "line",
              data: safe.data_now,
              itemStyle: {
                normal: {
                  color: "#409EFF"
                }
              },
              label: {
                normal: {
                  show: true,
                  position: "top",
                  color: "auto",
                  fontSize: "20"
                }
              }
            }
          ]
        },
        true
      ),
        myChart.on("click", function(param) {
          // if (param.value > 10) {
          //   this.employeeDatas = this.baseEmployee
          // } else {
          //   for (var i = 0; i < param.value; i++) {
          //     this.employeeDatas[i] = this.baseEmployee[i]
          //   }
          // }
          //   safe.employeeList(param.name, param.value)
        });
    },
    // employeeList(name, num) {
    //   this.employeeVisible = true
    //   this.employeeTitle = name
    // },
    employeeList(name, num) {
      this.employeeDatas = [];
      if (num > 10) {
        this.employeeDatas = this.baseEmployee;
      } else {
        for (var i = 0; i < num; i++) {
          this.employeeDatas[i] = this.baseEmployee[i];
        }
      }
      this.employeeVisible = true;
      this.employeeTitle = name;
    },
    handleSortChange(sort) {
      this.sort = {
        sort: sort.prop,
        order: sort.order == "ascending" ? "asc" : "desc"
      };
    },
    tableRowClassName(row, index) {
      //把每一行的索引放进row
      row.index = row.rowIndex;
    },
    headStyle({ row, rowIndex }) {
      return "table_head_style";
    },
    index_formatter: function(row, column, cellValue, index) {
      //放回索引值
      return this.pageSize * (this.page - 1) + 1 + index;
    },
    handleCurrentChange(val) {
      this.page = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.page = 1;
    },
    resetSearchForm(formName) {
      this.$refs.filters.resetFields();
    },
    selsChange: function(sels) {
      this.sels = sels;
    },
    cancel(formName) {
      this.dialogFormVisible = false;
      this.$refs[formName].resetFields();
    },
    treeNodeClick(data, node) {
      if (data.leaf == true) {
        this.initParam();
        this.reportName = data.name;
      }
    }
  },
  mounted() {
    this.drawLine();
  }
};
</script>
<style lang="scss">
.col_4 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.member-chart {
  margin-top: 20px;
  margin-bottom: 20px;
}
.attendance {
  display: flex;
}
.attDate {
  display: flex;
  margin-left: 10%;
  width: 300px;
  text-align: center;
}
.dd-dataCenter-heading {
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
  padding-top: 5px;
  padding-left: 5px;
  font-weight: bold;
}
.padding-top20 {
  padding-top: 20px;
}
.dd-dataCenter-panel {
  max-width: 220px !important;
  width: 100%;
  height: 180px;
  border-radius: 4px;
  border: 1px solid #dfdfdf;
  box-shadow: 0;
  background: #fff;
  float: left;
  margin-right: 15px;
  margin-left: 15px;
  margin-bottom: 8px;
}
.dd-dataCenter-panel-hd {
  background: #cac9c9;
  color: #333;
  border-bottom: 1px solid #e8e8e8;
  font-size: 14px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0 16px;
  padding-top: 10px;
  padding-bottom: 15px;
  line-height: 1;
  text-align: center;
}
.dd-person-status {
  width: auto;
  height: 28px;
  line-height: 28px;
  font-size: 14px;
  padding: 0 20px;
}
.pull-right {
  padding: 1px 5px;
  float: right;
  font-size: 16px;
}
</style>

